<template>
  <div id="app">
    <van-nav-bar
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <van-icon name="success" color="green" size="40"/>
    <el-row>
      <el-col :span="24">
        <div class="product-info-container">
          <van-cell title="支付成功" center :border="false"></van-cell>
          <el-col :span="24" class="ww">
            <van-cell><span>消耗{{ orders.payScore }}积分</span></van-cell>
          </el-col>
        </div>
      </el-col>
    </el-row>
    <van-button type="default" @click="goHome" >返回首页</van-button>
    <van-button type="default" @click="viewOrder">查看订单</van-button>
    <div class="guess-you-like">
      <h2>猜你喜欢</h2>
      <div class="da">
        <div class="zuo">
          <div class="product-item" v-for="product in products.slice(0, Math.ceil(products.length / 2))"
               :key="product.id">
            <img :src="product.image" alt="img" width="180px" height="180px">
            <div class="product-info">
              <span class="product-name">{{ product.name }}</span><br>
              <span class="product-sold">已兑{{ product.nums }}件</span><br>
              <span class="product-points">
          {{ product.score }}积分
          <van-button type="primary" size="small" @click="exchange(product)">兑换</van-button>
        </span>
            </div>
          </div>
        </div>
        <div class="you">
          <div class="product-item" v-for="product in products.slice(Math.ceil(products.length / 2))" :key="product.id">
            <img :src="product.image" alt="img" width="180px" height="180px">
            <div class="product-info">
              <span class="product-name">{{ product.name }}</span><br>
              <span class="product-sold">已兑{{ product.nums }}件</span><br>
              <span class="product-points">
          {{ product.score }}积分
          <van-button type="primary" size="small" @click="exchange(product)">兑换</van-button>
        </span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {Toast} from "vant";
import axios from "axios";

export default {
  data() {
    return {
      orders: {},
      user: {},
      products: [],
      userId: '',
      guessYouLike: [],
      goodsList: {},
    };
  },
  methods: {
    findGoods() {
      axios.post("/goods/good/findGoods").then(res => {
        this.products = res.data.data.goodsList
      })
    },
    onClickLeft() {
      Toast('返回');
      //返回上一个页面
      this.$router.go(-1);
    },
    goHome() {
      this.$router.push('/show')
      // 这里添加返回首页的路由跳转逻辑
      console.log('返回首页');
    },
    viewOrder() {
      this.$router.push('/orderPage')
      // 这里添加查看订单的路由跳转逻辑
      console.log('查看订单');
    },
    exchange(product) {
      console.log("id=" + product.id)
      axios.post("goods/good/findGoodsById?id=" + product.id).then(res => {
        //把查到的数据传到详情页
        this.goodsList = res.data.data.goods
        localStorage.setItem('goodsXq', JSON.stringify(this.goodsList))
        this.$router.push({path: '/xq'})
      })
    },
  },
  mounted() {
    var orders = localStorage.getItem('order');
    if (orders) {
      this.orders = JSON.parse(orders);
      console.log("orders=", this.orders);
    }
    this.findGoods()
  }
};
</script>

<style>
.guess-you-like {
  margin-top: 20px;
}

.product-list {
  display: flex;
  flex-wrap: wrap;
}

.da {
  width: 100%;
  height: 280px;
}

.zuo {
  width: 200px;
  height: 280px;
  float: left;
}

.you {
  width: 200px;
  height: 280px;
  float: right;
}
.product-info {
  text-align: left;
  width: 180px;
}
.ww {
  margin-top: 20px;
  text-align: center;
}
</style>
